<template>
	<view class="container-bottom-btns">
		<view class="form">
			<view class="form-column-item">
				<view class="label">店铺名称</view>
				<view class="content">
					<input v-model="form.firmName" placeholder-class="placeholder-input" type="text"
						placeholder="请输入店铺名称" />
				</view>
			</view>
			<view class="form-column-item">
				<view class="label">企业类型</view>
				<view class="picker-content" @tap="$refs.firmType.open()">
					<view :class="{'placeholder-picker': !firmTypeText, 'picker-text': firmTypeText}">
						{{firmTypeText ? firmTypeText: '请选择企业类型'}}
					</view>
					<u-icon name="arrow-down"></u-icon>
				</view>
			</view>
			<view class="form-column-item">
				<view class="label">主营业务</view>
				<view class="content">
					<input v-model="form.mainBusiness" placeholder-class="placeholder-input" type="text"
						placeholder="请输入主营业务" />
				</view>
			</view>
			<view class="form-column-item">
				<view class="label">服务区域</view>
				<view class="picker-content" @tap="$refs.region.open()">
					<view :class="{'placeholder-picker': !regionStr, 'picker-text': regionStr}">
						{{regionStr ? regionStr : '请选择服务区域'}}
					</view>
					<u-icon name="arrow-down"></u-icon>
				</view>
			</view>
			<view class="form-column-item" style="padding-bottom: 0;">
				<view class="label">店铺图片</view>
				<view class="content">
					<UploadImages v-model="imageList"></UploadImages>
				</view>
			</view>
		</view>

		<view class="bottom-btn-wrapper">
			<SubmitBtn text="提交" @click="submit"></SubmitBtn>
		</view>

		<OnePicker ref="firmType" keyName="label" :columns="firmTypeArr" @pickerConfirm="firmTypeConfirm"
			:defaultIndex="firmTypeIndex"></OnePicker>
		<u-picker :show="showRegionPicker" ref="areaPicker" :columns="columns" @confirm="regionConfirm"
			@cancel="showRegionPicker = false" @change="changeHandler" confirmColor="#FE5A13"></u-picker>
		<RegionPicker ref="region" @regionConfirm="regionConfirm" :provinceId="form.provinceId" :cityId="form.cityId" :areaId="form.areaId"></RegionPicker>

	</view>
</template>

<script>
	import {
		getFirmInfo,
		editFirm
	} from '@/api/user.js'
	import UploadImages from '@/components/UploadImages/UploadImages.vue'
	import {
		firmType,
		const2Arr
	} from '@/consts/index.js'
	import validate from '../../utils/validate';
	import {
		toast
	} from '@/utils/uni-api.js'
	export default {
		components: {
			UploadImages
		},
		data() {
			return {
				firmType,
				firmTypeArr: [const2Arr(firmType)],
				imageList: [],
				showRegionPicker: false,
				form: {},
				firmTypeIndex: [0]
			};
		},
		onLoad() {
			this.getFirmInfo()
		},
		computed: {
			regionStr() {
				return this.form.provinceId ? `${this.form.province},${this.form.city},${this.form.area}` : ''
			},
			firmTypeText() {
				return this.form.firmType ? this.firmTypeArr[0].find(item => item.value === this.form.firmType).label : ''
			}
		},
		methods: {
			firmTypeConfirm(e) {
				this.form.firmType = e.value.value
			},
			regionConfirm(e) {
				this.form.provinceId = e.value[0].value
				this.form.cityId = e.value[1].value
				this.form.areaId = e.value[2].value

				this.form.province = e.value[0].label
				this.form.city = e.value[1].label
				this.form.area = e.value[2].label
				
			},
			getFirmInfo() {
				getFirmInfo().then(res => {
					this.form = res.result
					this.firmTypeIndex = [this.firmTypeArr[0].findIndex(item => item.value == this.form.firmType)]
					this.imageList = this.form.firmImgs ? this.form.firmImgs.split(',') : []
				})
			},
			submit() {
				if (!validate.isNotEmpty(this.form.firmName, '企业名称')) return
				if (!validate.isNotEmpty(this.form.firmType, '企业类型')) return
				if (!validate.isNotEmpty(this.form.mainBusiness, '主营业务')) return
				if (!validate.isNotEmpty(this.form.provinceId, '服务区域')) return
				if (!this.imageList.length) {
					return toast('请上传店铺图片')
				}
				this.form.firmImgs = this.imageList.join(',')
				
				const {
					id,
					firmName,
					firmType,
					mainBusiness,
					provinceId,
					province,
					cityId,
					city,
					areaId,
					area,
					serviceArea,
					firmImgs
				} = this.form


				editFirm({
					firmId: id,
					firmName,
					firmType,
					mainBusiness,
					provinceId,
					province,
					cityId,
					city,
					areaId,
					area,
					serviceArea,
					firmImgs
				}).then(res => {
					toast('编辑成功', true)
					setTimeout(() => {
						uni.navigateBack()
					}, 800)
				})

			}
		}
	}
</script>

<style lang="scss">
	.sms-code {
		width: 163rpx;
		height: 52rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		border: 1rpx solid $theme-color;
		font-weight: normal;
		font-size: 25rpx;
		color: $theme-color;
	}

	.disabled {
		border: 1rpx solid #d1d1d1;
		color: #d1d1d1;
	}

	.agreement {
		padding: 40rpx 0 30rpx;
		font-size: 26rpx;

		.agree-text {
			color: $theme-color;
		}
	}
</style>